<template>
  <div v-if="type === 'desktop'" style="display: grid;height: 100%;width: 100%;">
    <div class="dsf783" style="box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1);position: relative">
      <van-nav-bar safe-area-inset-top color="grey" left-arrow left-text="设置" @click-left="onClickLeft"/>
      <div style="padding: 10px">
      111
      </div>
    </div>
  </div>
  <div v-if="type !== 'desktop'" class="csd78">
    <van-nav-bar safe-area-inset-top color="grey" left-arrow left-text="设置" @click-left="onClickLeft"/>
    <div style="padding: 10px">
      <UserInfo/>
    </div>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import DeviceDetector from "device-detector-js";
import {onMounted, ref} from "vue";

const type = ref('desktop')
onMounted(() => {
  const device = new DeviceDetector()
  const deviceInfo = device.parse(navigator.userAgent)
  if (deviceInfo) {
    type.value = deviceInfo.device.type
  }
})
const route = useRoute()
const router = useRouter()
const onClickLeft = () => {
  router.back()
}


</script>

<style scoped>
.csd78 {
  width: 100%;
  height: 100%;
  height: calc(100% - constant(safe-area-inset-bottom));
  height: calc(100% - env(safe-area-inset-bottom));
}

.dsf783 {
  margin: auto;
  width: 800px;
  height: calc(852px - constant(safe-area-inset-bottom));
  height: calc(852px - env(safe-area-inset-bottom));
  border-radius: 10px;
}
</style>
